<template>
  <div class="my_network_box">
    <div class="topBox add_btn_top">
      <div style="margin: 0 10px" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch
        style="margin-right: 10px"
        class="screenSwitch"
        active-color="#2680D2"
        v-model="screen"
      >
      </el-switch>
      <el-button type="primary" size="mini"
        ><i class="el-icon-download"></i>运行引擎下载
      </el-button>
      <el-button type="primary" size="mini" @click="handAdd"
        ><i class="el-icon-plus"></i>添加
      </el-button>
    </div>
    <AddDialog
      :productionList="productionList"
      @closeDialog="closeDialog"
      :themeList="themeList"
      :showDialog.sync="showDialog"
    ></AddDialog>
    <el-container>
      <el-main style="padding: 0; background: #fff">
        <div v-init-screen-h="20">
          <div class="new_type_list">
            <el-row :gutter="20" v-if="tableData && tableData.length !== 0">
              <el-col
                style="margin-bottom: 20px"
                :xs="12"
                :sm="12"
                :md="8"
                :lg="screen ? 7 : 6"
                :xl="4"
                v-for="item in tableData"
                :key="item.id"
              >
                <div @click="handNavTo(item)" class="item">
                  <!-- @click.stop="handleDel(item)" -->
                  <img
                    class="img"
                    :src="require('@/assets/images/yingyong_2.png')"
                    alt=""
                  />
                  <!-- <img class="img" src="../../assets/img9.png" alt="" /> -->
                  <div class="content w100" style="padding: 0 10px">
                    <!-- <div class="star_icon summary" style="left: 20px">
                      已部署
                    </div> -->
                    <div class="flex-x flex-space w100">
                      <div class="flex-x w-100">
                        <div class="title" style="margin-right: 10px">
                          {{ item.projectname }}
                        </div>
                      </div>
                      <div class="star_icon" style="top: 7px">
                        <span class="el-icon-loading" v-if="item.iconLoading">
                        </span>
                        <el-dropdown
                          v-else
                          size="medium"
                          @command="command => handleCommand(command, item)"
                        >
                          <span
                            @click.stop
                            class="el-icon-more"
                            style="font-size: 16px"
                          ></span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                              icon="el-icon-download"
                              command="download"
                              >应用导出</el-dropdown-item
                            >
                            <el-dropdown-item
                              icon="el-icon-download"
                              command="version"
                              >版本管理</el-dropdown-item
                            >
                            <el-dropdown-item command="delete">
                              <div
                                class="flex-x"
                                style="white-space: nowrap;flex-wrap: nowrap;"
                              >
                                <span
                                  class="el-icon-delete"
                                  style="margin-right: 5px; color: #f56c6c"
                                ></span>
                                <div style="color: #f56c6c">应用删除</div>
                              </div>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                    <div class="flex-x flex-space w100">
                      <div class="summary">
                        {{ item.createtime }}
                      </div>
                      <div class="flex-x">
                        <img
                          @click.stop="collectionProject(item)"
                          v-if="item.isCollection == 101"
                          style="width: 16px; height: 16px"
                          src="@/assets/images/star-on.png"
                          alt=""
                        />
                        <img
                          @click.stop="collectionProject(item)"
                          v-else
                          style="width: 16px; height: 16px"
                          src="@/assets/images/star-off.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <EmptyData
              v-if="tableData && tableData.length == 0"
              v-init-screen-h
            ></EmptyData>
          </div>
        </div>
      </el-main>
      <el-aside
        style="background: #fff; padding: 10px; margin-left: 10px"
        width="18%"
        v-show="screen"
      >
        <Search @setFilterList="setFilterList"></Search>
      </el-aside>
    </el-container>

    <EngineDialog :showDialog.sync="engineShow"></EngineDialog>
    <VersionDialog
      @handleClose="closeDialog"
      :showDialog.sync="versionShow"
      :projectcode="projectcode"
    ></VersionDialog>
  </div>
</template>
<script>
import { tableData } from "./js/local";
import EngineDialog from "./components/engineDialog.vue";
import EmptyData from "@/views/common/emptyData";
import VersionDialog from "./components/versionDialog.vue";
import {
  jiemaQueryProjects,
  jiemaGetOwnTheme,
  jiemaDeleteProjects,
  jiemaDelete,
  jiemaGetProductionList,
  jiemaCollectionProject,
  jiemaPreview,
  jiemaGetPageList,
  jiemaQueryDownloadProjectV2Async,
  jiemaGetPageInfoList,
  jiemaDownloadProjectV2Async
} from "@/api/jiema.js";
import _ from "lodash";
import AddDialog from "./components/AddDialog.vue";
import Search from "./components/searchFilter.vue";
export default {
  components: { AddDialog, EngineDialog, EmptyData, Search, VersionDialog },
  data() {
    return {
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      engineShow: false,
      themeList: [],
      tableData: [
        {
          projectname: "智慧风力发电看板",
          createtime: "2023-03-17 12:00:00"
        }
      ],
      showDialog: false,
      productionList: [],
      isCollection: "",
      switchShow: false,
      versionShow: false,
      projectcode: ""
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      // this.init(data);
    },
    download(url, name) {
      const downloadElement = document.createElement("a");
      let href = url;
      downloadElement.href = href;
      downloadElement.download = name; // 文件名字
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document &&
        document.bodyNaNpxoveChild &&
        document.bodyNaNpxoveChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象\
    },
    collectionProject(item) {
      // const isCollection = item.isCollection == 101;
      // jiemaCollectionProject({
      //   appuuid: item.appuuid,
      //   isCollection: isCollection ? 100 : 101
      // }).then(res => {
      //   this.init();
      //   this.$msg({
      //     type: "success",
      //     message: isCollection ? "取消收藏成功" : "收藏成功"
      //   });
      // });
    },
    versionDialogShow(item) {
      this.projectcode = item.appuuid;
      this.versionShow = true;
    },
    handleCommand(command, item) {
      // switch (command) {
      //   case "delete":
      //     this.handleDel(item);
      //     break;
      //   case "version":
      //     this.versionDialogShow(item);
      //     break;
      //   case "view":
      //     this.jimuView(item);
      //     break;
      //   case "download":
      //     this.queryDownloadProjectV2Async(item);
      //     break;
      //   default:
      //     break;
      // }
    },
    async queryDownloadProjectV2Async(item) {
      item.iconLoading = true;
      const query = {
        projectcode: item.appuuid,
        appuuid: item.appuuid,
        version: item.version
      };
      try {
        await jiemaGetPageInfoList(query);
        await jiemaDownloadProjectV2Async(query);
        // await jiemaQueryDownloadProjectV2Async(query);
        item.time = setInterval(async () => {
          const dres = await jiemaQueryDownloadProjectV2Async(query);
          const { flag, data } = dres.data;
          console.log("res.data.data :>> ", dres.data);
          if (flag == "true") {
            this.download("/jiema" + data, item.projectname);
            clearInterval(item.time);
            item.time = null;
            item.iconLoading = false;
          }
        }, 2000);
      } catch (error) {
        item.iconLoading = false;
      }
    },
    // 预览
    async jimuView(item) {
      const res = await jiemaGetPageList({
        appUuid: item.appuuid,
        version: item.version
      });
      const list = res.data.data;

      if (list.length) {
        const viewRes = await jiemaPreview({
          appuuid: item.appuuid,
          version: item.version
        });
        const obj = list.find(item => item.isroot === 1);
        if (obj) {
          const port = viewRes.data.data;
          // const str = 'http://10.216.36.96:7071'
          const JIEMA_URL = process.env.VUE_APP_JIEMA_URL_VIEW.split(":");
          const url = `${JIEMA_URL[0]}:${JIEMA_URL[1]}:${port}${obj.pageinfo}`;
          window.open(url);
        } else {
          this.$msg("未设置首页!");
        }
      } else {
        this.$msg("没有可预览页面");
      }
    },
    handleDel(item) {
      this.$confirm("一旦删除，应用内所有内容将被清空!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const { appuuid, version, id, remarks } = item;
          jiemaDeleteProjects({ appuuid, version: 0, id }).then(async res => {
            await jiemaDelete({ appuuid, version: 0, id: remarks });
            this.$msg({
              type: "success",
              message: "删除成功!"
            });
            this.init();
          });
        })
        .catch(err => {});
    },
    closeDialog(isRefresh) {
      if (isRefresh) {
        this.init();
      }
    },

    jiemaGetOwnTheme() {
      jiemaGetOwnTheme().then(res => {
        this.themeList = res.data.data;
      });
    },
    getProductionList() {
      jiemaGetProductionList({
        name: "",
        pageNum: 1,
        pageSize: 12,
        type: 100
      }).then(res => {
        this.productionList = res.data.data.list;
      });
    },
    async handAdd() {
      // this.jiemaGetOwnTheme();
      // this.getProductionList();
      // this.showDialog = true;
    },
    switchCollection(val) {
      if (val) {
        this.isCollection = 101;
      } else {
        this.isCollection = "";
      }
      this.init();
    },
    async init(data) {
      // tesQueryProjects
      jiemaQueryProjects({
        name: "",
        isCollection: false,
        ...data
      }).then(res => {
        console.log("res :>> ", res);
        if (res.data.data) {
          this.tableData = res.data.data.map(item => {
            return {
              ...item,
              iconLoading: false,
              time: null
            };
          });
        } else {
          this.tableData = [];
        }
      });
    },
    async handNavTo2(item) {
      const res = await jiemaGetPageList({
        appUuid: item.appuuid,
        version: item.version
      });
      const list = res.data.data;

      if (list.length) {
        const viewRes = await jiemaPreview({
          appuuid: item.appuuid,
          version: item.version
        });
        const obj = list.find(item => item.isroot === 1);
        if (obj) {
          const port = viewRes.data.data;
          // const str = 'http://10.216.36.96:7071'
          const JIEMA_URL = process.env.VUE_APP_JIEMA_URL_VIEW.split(":");
          const url = `${JIEMA_URL[0]}:${JIEMA_URL[1]}:${port}${obj.pageinfo}`;
          // window.open(url);
          const newWindow = window.open(url);
          newWindow.opener = null;
        } else {
          this.$msg("未设置首页!");
        }
      } else {
        this.$msg("没有可预览页面");
      }
    },
    handNavTo3(item) {
      console.log(process.env.VUE_APP_JIEMA_URL_VIEW);
      window.open(
        `${process.env.VUE_APP_JIEMA_URL_VIEW}/front/development/editor.html#/${item.id}/${item.version}`
      );
    },
    handNavTo(item) {
      // this.$router.push({
      //   name: "centerDetails",
      //   query: {
      //     version: item.version,
      //     id: item.appuuid
      //   }
      // });
      window.open(
        "http://dev.gemcoder.com/front/development/editor.html#/5f630fb9c35d40da9a4bc257e63dd512/0"
      );
      // this.$router.push({
      //   name: "centerDetails",
      //   query: {
      //     version: item.version,
      //     id: item.appuuid,
      //   },
      // });
    }
  }
};
</script>
<style>
div {
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.new_type_list {
  padding: 24px;

  .star_icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .item {
    display: flex;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    padding: 36px 0 26px 26px;
    padding-right: 0;
    position: relative;

    &:hover {
      /* 列表选中样式 */
      cursor: pointer;
      background-color: #f3f9ff;
      border: 1px solid rgba(38, 128, 210, 1);
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        color: #333;
        font-size: 16px;
        @include textoverflow(1);
      }

      .summary {
        color: #999999;
        font-size: 12px;
        @include textoverflow(2);
      }
    }

    .img {
      width: 62px;
      height: 62px;
      margin-right: 20px;
      border-radius: 50%;
    }
  }
}

.my_network_box {
  position: relative;

  // background-color: #fff;

  .add_btn {
    position: absolute;
    right: 0;
    top: -36px;
    z-index: 22;
  }
}
</style>
